<template>
  <div class="app-container">
    <avue-crud
      :option="option"
      :data="data"
      :table-loading="loading"
      :page.sync="page"
      @on-load="onLoad"
      @row-update="rowUpdate"
      @current-change="currentChange"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="resetChange"
      @selection-change="selectionChange"
    >
      <template
        slot="icon"
        slot-scope="scope"
      >
        <div v-if="scope.row.icon">
          <svg-icon :icon-class="scope.row.icon"></svg-icon>
        </div>
      </template>
      <template slot="menuLeft">
        <div style="display:inline-block;">
          <div style="display:flex">
            <el-button
              v-has="'blackExport'"
              type="primary"
              icon="el-icon-download"
              size="small"
              :disabled="page.total == 0"
              :loading="downLoading"
              @click.stop="handleDownload"
            >导出</el-button>
            <el-button
              type="primary"
              size="small"
              @click="addFromSour"
              icon="el-icon-plus"
              v-has="'blackAdd'"
            >
              新 增
            </el-button>
            <el-upload
              :show-file-list="false"
              :before-upload="beforeUpload"
              :on-success="onSuccess"
              :on-error="onError"
              :headers="headers"
              :action="importCustomer"
              v-has="'blackImport'"
            >
              <el-button
                type="primary"
                size="small"
                :icon="importDataBtnIcon"
              >
                {{importDataBtnText}}
              </el-button>
            </el-upload>
            <el-button
              size="small"
              type="primary"
              @click="handelDownloadTemp"
              icon="el-icon-download"
              v-has="'blackModelDownLoad'"
            >
              模板下载
            </el-button>
          </div>
        </div>

      </template>
      <template
        slot="menu"
        slot-scope="scope"
      >
        <el-button
          size="small"
          type="text"
          @click="checkOpen(scope.row,'check')"
          icon="el-icon-view"
        >查看</el-button>
        <el-button
          size="small"
          type="text"
          @click="checkOpen(scope.row,'edit')"
          icon="el-icon-edit"
          v-if="scope.row.isBlack == '1'"
        >编辑</el-button>
        <el-button
          size="small"
          type="text"
          @click="rowDel(scope.row)"
          icon="el-icon-delete"
          v-if="scope.row.isBlack == '1'"
        >删除</el-button>
      </template>
    </avue-crud>
    <company
      :openDialog="openDialog"
      :title="title"
      :black="black"
      :qylxList="qylxList"
      ref="company"
      @save="save"
      @handleReset="handleReset"
    />

    <el-dialog
      title="导入结果"
      :visible.sync="imptRestDialogVisible"
      width="45%"
    >
      <p
        v-for="o in imptRestInfo"
        :key="o"
        class=" text item"
        style="text-indent:30px"
      >
        {{ o }}
      </p>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="closeRestDialog"
        >关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 查看或编辑 -->
    <el-dialog
      :title="checkTitle"
      :visible.sync="checkDialog"
      width="50%"
      center
    >
      <el-form
        ref="form"
        :model="dataList"
        label-width="100px"
      >
        <div class="message">
          <div class="module">
            <el-tabs v-model="active">
              <el-tab-pane
                label="企业信息"
                name="first"
              >
                <table class="detailtable">
                  <tr>
                    <td width="15%">企业名称</td>
                    <td width="35%">{{dataList.qymc}}</td>
                    <td width="15%">统一社会信用代码</td>
                    <td width="35%">{{dataList.shtyxydm}}</td>
                  </tr>
                  <tr>
                    <td width="15%">法人姓名</td>
                    <td width="35%">{{dataList.fddbr}}</td>
                    <!-- <td width="15%">联系方式</td>
                                        <td width="35%">{{dataList.dh}}</td> -->
                    <td width="15%">注册时间</td>
                    <td width="35%">{{dataList.clrq}}</td>
                  </tr>
                  <tr>
                    <td width="15%">注册资金</td>
                    <td width="35%">{{dataList.zczb}}万元</td>
                    <td width="15%">所属行业</td>
                    <td width="35%">{{dataList.sshy}}</td>
                  </tr>
                  <tr>
                    <td width="15%">所属区域</td>
                    <td width="35%">{{dataList.ssqu}}</td>
                  </tr>
                  <tr>
                    <td width="15%">企业类型</td>
                    <td colspan="3">{{dataList.qylx | filterQylx(qylxList)}}</td>
                  </tr>
                  <tr>
                    <td width="15%">注册地址</td>
                    <td colspan="3">{{dataList.zs}}</td>
                  </tr>
                </table>
              </el-tab-pane>
            </el-tabs>
          </div>
          <!--                    <div class="module">-->
          <!--                        <el-tabs v-model="active">-->
          <!--                            <el-tab-pane label="法人信息" name="first">-->
          <!--                                <table class="detailtable">-->
          <!--                                    <tr>-->
          <!--                                        <td width="15%">法人姓名</td>-->
          <!--                                        <td width="35%">{{dataList.fddbr}}</td>-->
          <!--                                        <td width="15%">性别</td>-->
          <!--                                        <td width="35%">{{dataList.xb}}</td>-->
          <!--                                    </tr>-->
          <!--                                    <tr>-->
          <!--                                        <td width="15%">出生日期</td>-->
          <!--                                        <td width="35%">{{dataList.csrq}}</td>-->
          <!--                                        &lt;!&ndash; <td width="15%">籍贯</td>-->
          <!--                                        <td>{{dataList.jg}}</td>-->
          <!--                                        <td width="15%">婚姻状况</td>-->
          <!--                                        <td>{{dataList.hyzk}}</td> &ndash;&gt;-->
          <!--                                        <td width="15%">学历</td>-->
          <!--                                        <td width="35%">{{dataList.xl}}</td>-->
          <!--                                    </tr>-->
          <!--                                    <tr>-->
          <!--                                        <td width="15%">证件号码</td>-->
          <!--                                        <td width="35%">{{dataList.sfzjhm}}</td>-->
          <!--                                        <td width="15%">电话号码</td>-->
          <!--                                        <td width="35%">{{dataList.lxdh}}</td>-->
          <!--                                        &lt;!&ndash; <td width="15%">邮箱</td>-->
          <!--                                        <td>{{dataList.yx}}</td> &ndash;&gt;-->
          <!--                                    </tr>-->
          <!--                                    &lt;!&ndash; <tr>-->
          <!--                                        <td width="15%">联系地址</td>-->
          <!--                                        <td colspan="5">{{dataList.zs}}</td>-->
          <!--                                    </tr> &ndash;&gt;-->
          <!--                                </table>-->
          <!--                            </el-tab-pane>-->
          <!--                        </el-tabs>-->
          <!--                    </div>-->
          <div class="module">
            <el-tabs v-model="active">
              <el-tab-pane
                label="列入原因"
                name="first"
              >
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item
                      label="黑名单类型:"
                      class="formItem"
                    >
                      <el-select
                        v-model="dataList.hmdzl"
                        class="w100"
                        placeholder="请选择黑名单类型"
                        :disabled="checkTitle == '查看'"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="16">
                    <el-form-item label="列入原因:">
                      <el-input
                        v-model="dataList.addCase"
                        autosize
                        type="textarea"
                        placeholder="请输入列入原因"
                        :disabled="checkTitle == '查看'"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  :gutter="20"
                  v-if="checkTitle == '查看'"
                >
                  <el-col :span="8">
                    <el-form-item label="操作人:">
                      {{dataList.ename}}
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div
            class="dialog-footer"
            v-show="checkTitle == '编辑'"
          >
            <el-button
              type="primary"
              @click="rowUpdate(dataList)"
              round
            >保存</el-button>
            <el-button
              @click="checkDialog = false"
              type="primary"
              plain
              round
            >取消</el-button>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addB, getB, delB, upB } from '@/api/manager.js'
import company from './company'
import store from '@/store'
import { getField, downloadTemp } from '@/api/user.js'
export default {
  components: {
    company,
  },
  data() {
    return {
      loading: false,
      downLoading: false,
      roleId: '',
      form: {},
      importCustomer: '',
      importDataBtnText: '导 入',
      importDataBtnIcon: 'el-icon-upload2',
      importDataDisabled: false,
      selectionList: [],
      openDialog: false,
      black: 'black',
      qylxList: [],
      title: '新增黑名单客户',
      searchList: {},
      checkDialog: false,
      checkTitle: '',
      dataList: {},
      active: 'first',
      options: [
        { label: '存在强制执行', value: '存在强制执行' },
        { label: '负债较高', value: '负债较高' },
        { label: '多次逾期', value: '多次逾期' },
        { label: '其他', value: '其他' },
      ],

      imptRestDialogVisible: false,
      imptRestInfo: [],
      /* 分页 */
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        background: false,
      },
      data: [
        {
          id: 1,
          deptValue: '机构1',
          orgCode: '编号',
          deptPid: '上级机构',
          oindex: 1,
          icon: 'back',
          note: '信息描述',
        },
      ],
      option: {
        headerAlign: 'center',
        align: 'center',
        border: true,
        /* index: true,
                    indexLabel: '序号',
                    indexWidth:80, */
        card: true,
        defaultExpandAll: true,
        dialogDrag: false,
        labelWidth: 135,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        addBtn: false,
        excelBtn: false,
        selection: false,
        searchLabelWidth: '20%',
        searchSpan: 8,
        searchMenuSpan: 4,
        columnBtn: false,
        refreshBtn: false,
        selectClearBtn: false,
        // searchBtn: true,
        searchShowBtn: false,
        column: [
          {
            label: '企业名称',
            prop: 'qymc',
            display: false,
            search: true,
          },
          {
            label: '统一社会信用代码',
            prop: 'shtyxydm',
            display: false,
            search: true,
            searchLabelWidth: '35%',
          },
          {
            label: '企业类型',
            prop: 'qylx',
            type: 'select',
            dicData: [],
            display: false,
          },
          {
            label: '法人姓名',
            prop: 'fddbr',
            display: false,
            search: true,
          },
          /* {
                            label: '企业综合评分',
                            prop: 'score',
                            display: false
                        }, */
          // {
          //     label: '联系方式',
          //     prop: 'lxdh',
          //     display: false
          // },
          {
            label: '黑名单类型',
            prop: 'hmdzl',
            display: false,
          },
          /* {
                            label: '操作人',
                            prop: 'cuser',
                            hide: true,
                            display: false,
                        }, */
          {
            label: '操作人',
            prop: 'ename',
            display: false,
            search: true,
          },
          {
            label: '创建时间',
            prop: 'createTime',
            display: false,
          },
        ],
        group: [
          {
            icon: 'el-icon-info',
            label: '企业信息',
            collapse: true,
            column: [
              {
                label: '企业名称',
                prop: 'qymc',
                disabled: true,
              },
              {
                label: '统一社会信用代码',
                prop: 'shtyxydm',
                disabled: true,
              },
              {
                label: '注册时间',
                prop: 'clrq',
                type: 'date',
                disabled: true,
              },
              {
                label: '注册资金',
                prop: 'zczb',
                disabled: true,
              },
              {
                label: '所属行业',
                prop: 'sshy',
                type: 'select',
                disabled: true,
                dicData: [
                  {
                    label: '请选择',
                    value: '',
                  },
                  {
                    label: '农林牧渔业',
                    value: '0',
                  },
                  {
                    label: '教育',
                    value: '1',
                  },
                  {
                    label: '采矿业',
                    value: '2',
                  },
                ],
              },
              {
                label: '所属区域',
                prop: 'ssqu',
                disabled: true,
              },
              {
                label: '企业类型',
                prop: 'qylx',
                type: 'select',
                disabled: true,
                dicData: [
                  {
                    label: '小微企业',
                    value: '1',
                  },
                  {
                    label: '中型企业',
                    value: '2',
                  },
                  {
                    label: '大型企业',
                    value: '3',
                  },
                  {
                    label: '超大型企业',
                    value: '4',
                  },
                  {
                    label: '个体工商户',
                    value: '5',
                  },
                ],
              },
              // {
              //     label: '联系方式',
              //     prop: 'dh',
              //     disabled:true,
              // },
              {
                label: '注册地址',
                prop: 'zs',
                disabled: true,
              },
            ],
          },
          {
            icon: 'el-icon-info',
            label: '法人信息',
            collapse: true,
            column: [
              {
                label: '法人姓名',
                prop: 'fddbr',
                disabled: true,
              },
              {
                label: '性别',
                prop: 'xb',
                type: 'select',
                disabled: true,
                dicData: [
                  {
                    label: '男',
                    value: '1',
                  },
                  {
                    label: '女',
                    value: '0',
                  },
                ],
              },
              {
                label: '出生日期',
                type: 'date',
                prop: 'csrq',
                disabled: true,
              },
              {
                label: '籍贯',
                prop: 'jg',
                disabled: true,
              },
              {
                label: '婚姻状况',
                prop: 'hyzk',
                type: 'select',
                disabled: true,
                dicData: [
                  {
                    label: '已婚',
                    value: '1',
                  },
                  {
                    label: '未婚',
                    value: '0',
                  },
                ],
              },
              {
                label: '学历',
                prop: 'xl',
                type: 'select',
                disabled: true,
                dicData: [
                  {
                    label: '请选择',
                    value: '',
                  },
                  {
                    label: '专科',
                    value: '0',
                  },
                  {
                    label: '本科',
                    value: '1',
                  },
                  {
                    label: '其他',
                    value: '2',
                  },
                ],
              },

              {
                label: '身份证',
                prop: 'sfzjhm',
                disabled: true,
              },
              // {
              //     label: '联系方式',
              //     prop: 'lxdh',
              //     disabled:true,
              // },
              {
                label: '邮箱',
                prop: 'yx',
                disabled: true,
              },
              {
                label: '联系地址',
                prop: 'dz',
                disabled: true,
              },
            ],
          },
          {
            icon: 'el-icon-info',
            label: '列入原因',
            collapse: true,
            column: [
              {
                label: '黑名单类型',
                prop: 'hmdzl',
                type: 'select',
                dicData: [
                  {
                    label: '存在强制执行',
                    value: '',
                  },
                  {
                    label: '负债较高',
                    value: '0',
                  },
                  {
                    label: '多次逾期',
                    value: '1',
                  },
                  {
                    label: '其他',
                    value: '2',
                  },
                ],
              },
              {
                label: '列入原因',
                prop: 'addCase',
              },
            ],
          },
        ],
      },
    }
  },
  created() {
    this.roleId = this.$store.getters.roleId
    /* var buttonpermsStr = JSON.parse(localStorage.getItem('btnList'));
            this.option.excelBtn = buttonpermsStr.indexOf('blackExport') > -1 ? true:false; */
    let params = {
      page: 1,
      size: 100,
      code: 'QYLX',
    }
    getField(params).then((res) => {
      if (res.status) {
        this.qylxList = res.data.records
        this.option.column[2].dicData = res.data.records.map((item) => {
          return { label: item.fieldName, value: item.fieldCode }
        })
      }
    })
    this.importCustomer =
      process.env.VUE_APP_BASE_API + '/customer/black/import'
  },
  computed: {
    headers() {
      return {
        TOKEN: this.$store.getters.token,
      }
    },
  },
  filters: {
    filterQylx(val, qylxList) {
      if (!val) return
      var isnum = /^\d+$/.test(val)
      if (isnum) {
        return qylxList.filter((item) => item.fieldCode == val)[0].fieldName
      } else {
        return val
      }
    },
  },
  methods: {
    onLoad(page, params = {}) {
      /* if (page.layout) {
                    Object.assign(params, {
                        pageNum: 1,
                        pageSize: 10
                    })
                } else {
                    Object.assign(params, page)
                } */
      let searchList = this.searchList
      Object.assign(params, {
        ...searchList,
        pageNum: this.page.currentPage,
        pageSize: this.page.pageSize,
      })
      this.loading = true
      getB(params).then((data) => {
        if (data.status) {
          this.loading = false
          this.data = data.data.records
          this.page.total = data.data.total
        }
      })
    },
    selectionChange(selection, row) {
      this.selectionList = selection
    },
    /* 清空 */
    resetChange() {
      this.page.currentPage = 1
      this.page.pageSize = 10
      this.searchList = {}
      this.onLoad()
    },
    /* 搜索筛选 */
    searchChange(params, done) {
      done()
      this.page.currentPage = 1
      this.page.pageSize = 10
      this.searchList = {
        ...params,
      }
      this.onLoad()
    },
    /* 新增 */
    rowSave(row, done, loading) {
      addB(row).then(
        (data) => {
          if (data.status) {
            this.onLoad(this.page)
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
          }
          done()
        },
        (error) => {
          window.console.log(error)
          loading()
        }
      )
    },
    addFromSour() {
      // 显示窗口
      this.openDialog = true

      /* this.$nextTick(() => {
                        this.$refs.company.init();
                    }); */
      // this.company.init();
    },
    //新增取消
    handleReset(val) {
      this.openDialog = val
    },
    save(params) {
      let param = {
        addCase: params.addCase,
        hmdzl: params.hmdzl,
        qyshxydm: params.shtyxydm,
      }
      addB(param).then(
        (data) => {
          if (data.status) {
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
            this.onLoad(this.page)
            this.openDialog = false
            this.$refs.company.resetForm()
          } else {
            this.$message.error(data.msg)
          }
        },
        (error) => {
          window.console.log(error)
        }
      )
    },
    /* 查看 */
    checkOpen(row, type) {
      this.checkDialog = true
      this.checkTitle = type == 'check' ? '查看' : '编辑'
      this.dataList = { ...row }
    },
    /* 修改 */
    rowUpdate(row, index, done, loading) {
      /* delete row.createTime;
                delete row.updateTime; */
      let param = {
        addCase: row.addCase,
        hmdzl: row.hmdzl,
        qyshxydm: row.shtyxydm,
      }
      upB(param).then(
        (res) => {
          if (res.status) {
            //done();
            this.checkDialog = false
            this.onLoad(this.page)
            this.$message({
              type: 'success',
              message: res.msg,
            })
          } else {
            this.$message({
              type: 'error',
              message: res.msg,
            })
          }
        },
        (error) => {
          window.console.log(error)
          //loading();
        }
      )
    },
    /* 改变页码 */
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
    /* 删除 */
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        delB({
          shtyxydm: row.shtyxydm,
        }).then(() => {
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        })
      })
    },
    beforeUpload(file) {
      var FileExt = file.name.replace(/.+\./, '')
      if (['xlsx'].indexOf(FileExt.toLowerCase()) === -1) {
        this.$message({
          type: 'warning',
          message: '请使用下载的模板，上传后缀名为xlsx的文件！',
        })
        return false
      }
      this.importDataBtnText = '正在导入'
      this.importDataBtnIcon = 'el-icon-loading'
      this.importDataDisabled = true
      this.imptRestInfo = []
    },
    closeRestDialog() {
      this.imptRestDialogVisible = false
      this.onLoad(this.page)
    },
    onSuccess(response, file, fileList) {
      this.importDataBtnText = '导 入'
      this.importDataBtnIcon = 'el-icon-upload2'
      this.importDataDisabled = false
      // console.log(response)
      this.onLoad(this.page)
      // this.$message({
      //     type: "success",
      //     message: "导入成功!"
      // });
      // this.initEmps();

      this.imptRestDialogVisible = true
      if (response.status) {
        this.imptRestInfo = response.data
      } else {
        this.imptRestInfo.push(response.msg)
      }
    },
    onError(err, file, fileList) {
      this.importDataBtnText = '导 入'
      this.importDataBtnIcon = 'el-icon-upload2'
      this.importDataDisabled = false
      this.onLoad(this.page)
      this.$message({
        type: 'error',
        message: '导入失败!',
      })
    },
    submitUpload() {
      var aa = store.state.token
      aa = store.getters.token
      aa = store.getters.access_token
      aa = this.$store.getters
      // debugger
      this.$refs.upload.submit()
    },
    handelDownloadTemp() {
      downloadTemp().then((res) => {
        let fileName = '黑名单客户模板.xlsx'
        var link = document.createElement('a')
        link.href = window.URL.createObjectURL(res)
        link.download = fileName
        link.click()
        //释放内存
        window.URL.revokeObjectURL(link.href)
      })
    },
    handleDownload() {
      let searchList = this.searchList
      let params = {
        ...searchList,
        pageNum: 1,
        pageSize: this.page.total,
      }
      this.downLoading = true
      getB(params).then((res) => {
        this.downLoading = false
        if (res.status) {
          let data = res.data.records.map((item) => {
            return {
              ...item,
              isBlack: item.isBlack == '0' ? '是' : '否',
            }
          })
          let opt = {
            title: '黑名单客户',
            column: [
              {
                label: '企业名称',
                prop: 'qymc',
              },
              {
                label: '统一社会信用代码',
                prop: 'shtyxydm',
              },
              {
                label: '企业类型',
                prop: 'qylx',
              },
              {
                label: '法人姓名',
                prop: 'fddbr',
              },
              {
                label: '联系方式',
                prop: 'lxdh',
              },
              {
                label: '黑名单类型',
                prop: 'hmdzl',
              },
              {
                label: '操作人',
                prop: 'ename',
              },
              {
                label: '创建时间',
                prop: 'createTime',
              },
            ],
            data: data,
          }
          this.$Export.excel({
            title: opt.title,
            columns: opt.column,
            data: opt.data,
          })
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
/deep/ .avue-crud__pagination {
  text-align: center;
}
.dialog-footer {
  text-align: center;
  margin: 20px auto;
}
.detailtable {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: #e5e5e5 solid 1px;
}
.detailtable tr {
  width: 100%;
}
.detailtable td {
  padding: 8px 10px;
  text-align: left;
  line-height: 24px;
  font-size: 14px;
  color: #434343;
  border: #e5e5e5 solid 1px;
}
.detailtable td {
  font-weight: normal;
  background-color: #fff;
}
.detailtable td {
  word-break: break-all;
}
</style>
